<template>
  <div class="body">
    <section class="policy-banner">
      <div class="center-block">
        <div class="index-title pull-left">
          <h2>政策法规</h2>
        </div>
      </div>
    </section>
    <section class="searchMain">
      <div class="MainTop">
        <div class="indexSearchBox">
          <div class="input-group">
            <span class="input-group-btn">
              <i class="inSearchFdj dtFont dtFont-sousuo"></i>
            </span>
            <input v-model="query.value" type="text" placeholder="请输入您要查询的关键字" class="form-control" />
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" @click="search">搜索</button>
            </span>
          </div>
        </div>
      </div>
      <div class="center-block">
        <div class="MainTable moveTable">
          <h3 class="circular-title">政策法规类型</h3>
          <ul class="data-searchBoxSelcect">
            <li>
              <section class="secTab">
                <!-- 点击切换 -->
                <span
                  v-for="(item,index) in policys"
                  :class="{active:item.ids==query.ids}"
                  :key="index"
                  @click="active(policys,index)"
                >{{item.typeName}}</span>
              </section>
            </li>
          </ul>
          <!-- 表格内容区域 -->
          <div class="table m_c_table">
            <el-table :data="tableData.list" style="width: 100%">
              <el-table-column prop="articleTitle" label="公文标题">
                <template slot-scope="scope">
                  <router-link :to="`/projectApproval/policyDetails?id=${scope.row.id}`">
                    <span class="link">{{scope.row.articleTitle}}</span>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column prop="articleAddDate" label="公文编号" width="180"></el-table-column>
              <el-table-column
                :formatter="dateForma"
                prop="articleAddDate"
                label="发布时间"
                width="180"
              ></el-table-column>
              <el-table-column align="right" :formatter="dateForma" label="操作" width="130">
                <template>
                  <el-link type="primary">查询详情</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页区域 -->
          <div style="padding: 20px 0">
            <div class="fenYe clearfix">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// 获取表格数据
import { getTableList } from "@/api/projectApproval/index.js";
// moment 转换时间格式的插件
import moment from "moment";
import "@/assets/css/projectApproval.css";
export default {
  data: function() {
    return {
      // 自定义的政策法规类型
      policys: [
        { ids: "", typeName: "全部" },
        { ids: "01", typeName: "法律法规" },
        { ids: "02", typeName: "规章制度" },
        { ids: "03", typeName: "管理办法" }
      ],
      tableData: {
        list: [],
        total: 0
      },
      query: {
        page: 1,
        pageSize: 20,
        value: "",
        ids: ""
      }
    };
  },
  methods: {
    // 切换法规类型获取不同的表格内容
    active(type, index) {
      if (type === this.policys) {
        this.query.ids = type[index].ids;
      }
      this.getTableList();
    },
    // 点击搜索获取搜索数据
    search() {
      this.getTableList()
    },
    // 获得表格数据
    getTableList(data) {
      const { page, pageSize, value, ids } = this.query;
      data = { page, pageSize, value, ids };
      getTableList(data).then(res => {
        console.log(res);
        const data = res;
        this.tableData.list = res.obj.rows;
        this.tableData.total = res.obj.total;
      });
    },
    // 时间转化函数
    dateForma: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    handleSizeChange(newSize) {
      this.tableQuery.page = newSize;
      this.getTableList();
      // console.log( this.tableQuery.page);
    },
    // 左边栏第几页的数据
    handleCurrentChange(newPage) {
      // this.tableQuery.pageSize=newPage
      // this.getTableList()
    }
  },
  created() {
    this.getTableList();
  }
};
</script>

